import React, { useState } from 'react'
import { Provider } from 'react-redux'
import store from '../components/redux/store'
import Header_container from '../components/containers/Header_container'
import NavMenu from '../components/classroom/NavMenu'
import styles from '../styles/classroom/classroom.scss'
import InfoShow from '../components/classroom/InfoShow'
import BorrowInfo from '../components/classroom/BorrowInfo'

export default function classroom() {
    const [currentMenuIndex, setCurrentMenuIndex] = useState('info') // 导航栏切换选项卡
    const [currentCourse, setCurrentCourse] = useState<number>(null) // 课程

    const judgeShowPage = () => {
        const contants = {
            info: <InfoShow setCurrentMenuIndex={setCurrentMenuIndex} setCurrentCourse={setCurrentCourse} />,
            borrow: <BorrowInfo currentCourse={currentCourse} setCurrentCourse={setCurrentCourse} />,
        }
        return contants[currentMenuIndex]
    }
    return (
        <div>
            <Provider store={store}>
                <Header_container />
            </Provider>
            <div className={styles.layout}>
                <NavMenu
                    currentMenuIndex={currentMenuIndex}
                    setCurrentMenuIndex={setCurrentMenuIndex}
                    setCurrentCourse={setCurrentCourse}
                />
                {
                    judgeShowPage()
                }
            </div>
        </div>
    )
}
